<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

		<!-- bootstrap的javascript插件--需要引用jQuery -->
		<script src="bootstrap/js/jquery.min.js"></script>

		<!--包括所有已编译的插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/pic-1.jpg" alt="First slide">
					<div class="carousel-caption">图片 1</div>
				</div>
				<div class="item">
					<img src="img/pic-2.jpg" alt="Second slide">
					<div class="carousel-caption">图片 2</div>
				</div>
				<div class="item">
					<img src="img/pic-3.jpg" alt="Third slide">
					<div class="carousel-caption">图片 3</div>
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
			<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
			<!-- 控制按钮 -->
			<div style="text-align:center;">
				<input type="button" class="btn start-slide" value="Start">
				<input type="button" class="btn pause-slide" value="Pause">
				<input type="button" class="btn prev-slide" value="Previous Slide">
				<input type="button" class="btn next-slide" value="Next Slide">
				<input type="button" class="btn slide-one" value="Slide 1">
				<input type="button" class="btn slide-two" value="Slide 2">
				<input type="button" class="btn slide-three" value="Slide 3">
			</div>
		</div>
		<script>
			$(function() {
				// 初始化轮播
				$(".start-slide").click(function() {
					$("#myCarousel").carousel('cycle');
				});
				// 停止轮播
				$(".pause-slide").click(function() {
					$("#myCarousel").carousel('pause');
				});
				// 循环轮播到上一个项目
				$(".prev-slide").click(function() {
					$("#myCarousel").carousel('prev');
				});
				// 循环轮播到下一个项目
				$(".next-slide").click(function() {
					$("#myCarousel").carousel('next');
				});
				// 循环轮播到某个特定的帧 
				$(".slide-one").click(function() {
					$("#myCarousel").carousel(0);
				});
				$(".slide-two").click(function() {
					$("#myCarousel").carousel(1);
				});
				$(".slide-three").click(function() {
					$("#myCarousel").carousel(2);
				});
				$(".slide-three").click(function() {
					$("#myCarousel").carousel(2);
				});
			});
		</script>

	</body>
</html>
